<template>
    <div>
        <!-- Indicator组件 -->
        <el-badge 
          class="item"
          v-for="(question,idx) in tableData" 
          :key="idx" 
          :value=" idx+1 <10? '0' + (idx+1) : (idx+1) " 
          :type="getType(idx)" 
          @click.native="gotoIndex(idx)">
          </el-badge>

          <!-- {{tableData}} -->
          <!-- {{randomSize}} -->
          <!-- {{handelOptions}} -->
          <!-- {{index}} -->
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      // total: 20,
      // current: 1,
    };
  },
  methods: {
    ...mapMutations("study", ["SET_INDEX"]),
    gotoIndex(index) {
      this.SET_INDEX(index);
    },
    getType(idx) {
      // console.log(idx)
      // console.log(this.index)
      // let questionObj = this.tableData[idx];
      // console.log(typeof questionObj.answers)

      let type = "info";
      let questionObj = this.tableData[idx];
      // console.log(JSON.parse(questionObj.answers).join(""))
      // console.log(questionObj.userAnswers&&questionObj.userAnswers)
      if(questionObj.userAnswers){
        if(questionObj.userAnswers == JSON.parse(questionObj.answers).join("")){
        type = "success";
      }else{
        type = "danger";
      }
      }
      if (this.index == idx) {
        type = "primary";
      }
      return type;


      // console.log(this.tableData[idx])
    }
  },
  computed: {
    ...mapState("study", ["index", "randomSize", "tableData"]),
    ...mapGetters("study", ["handelOptions"])
  }
};
</script>

<style scoped>
</style>